<template>
  <div style="min-height: 450px" class="home">
    <!-- <header-top></header-top> -->
    <navigator activeId="0"></navigator>
    <body-middle ref="articles" :kw="kw"></body-middle>
  </div>
</template>

<script>
import Navigator from "@/components/Navigator.vue";
import BodyMiddle from "@/components/Body.vue";

export default {
  name: "Home",
  components: {
    Navigator,
    BodyMiddle,
  },
  data() {
    return { kw: null };
  },
  methods: {
    search() {
      this.$refs.articles.requestArticleList({ keyword: this.kw });
    }
  },
  watch: {
    $route() {
      this.kw = this.$route.query.keyword;
      this.search(this.kw);
    }
  },
  mounted() {
    this.kw = this.$route.query.keyword;
    this.$refs.articles.requestArticleList({keyword: this.kw});
  },
};
</script>

<style>
</style>
